<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="add"
          >创建人群包</a-button>
          <span class="icon" @click="toExplain">
            <a-icon
              type="question-circle"
              theme="twoTone"
              two-tone-color="#e5b37d"
            />
          </span>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataSource"
        @change="handleTableChange"
        :scroll="{x: 1500 }"
      >
        <span
          slot="states"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span
            class="start"
            v-if="record.isUse == '启用'"
          >
            启用
          </span>
          <span
            class="end"
            v-else
          >
            禁用
          </span>
        </span>
        <template
          slot="action"
          slot-scope="txt, record"
        >
          <a
            v-if="record.isUse == '启用'"
            @click="change(record)"
          >
            禁用
          </a>
          <a
            v-else
            @click="change(record)"
          >
            启用
          </a>
          <a
            class="mr-10"
            @click="add(record)"
          >
            编辑
          </a>

        </template>
      </a-table>
      <create
        v-if="showAdd"
        :detailId="detailId"
        @close="close"
      ></create>
       <explain
        v-if="showExplain"
        @closeExplain="closeExplain"
      ></explain>
    </a-card>
  </div>
</template>

<script>
import create from './create.vue'
import explain from './explain.vue'
import { peopleSetList, disablePeopleSet, enablePeopleSet } from '@api/label/index'

const columns = [
  {
    title: '人群包ID',
    width: 210,
    dataIndex: 'peoplesId'
  },
  {
    title: '人群包名称',
    width: 190,
    dataIndex: 'peoplesName'
  },
  {
    title: '应用类型',
    dataIndex: 'appTypeDesc'
  },
  {
    title: '人群包类型',
    dataIndex: 'peoplesTypeDesc'
  },
  {
    title: '归属渠道',
    dataIndex: 'channel'
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'createTime'
  },
  {
    title: '实时人群数量',
    width: 120,
    dataIndex: 'peoplesCount'
  },
  {
    title: '状态',
    width: 100,
      align: 'center',

    scopedSlots: { customRender: 'states' }
  },
  {
    title: '操作',
    width: 130,
    fixed: 'right',
      align: 'center',

    scopedSlots: { customRender: 'action' }
  }
]
const chanelList = [
  {
    value: 'member',
    name: '会员部'
  },
  {
    value: 'pos',
    name: 'POS+'
  },
  {
    value: 'integral',
    name: '积分商城'
  },
  {
    value: 'damo',
    name: '达摩'
  }
]
export default {
  components: {
    create,
    explain
  },
  data() {
    return {
      columns,
      chanelList,
      form: this.$form.createForm(this),
      jobNumber: '',
      showAdd: false,
      showExplain:false,
      patt: 'api/gateway/basemgt-op',
      account: '',
      detailId: '',
      channel: '',
      loading: true,
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
  },

  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    add(record) {
      this.showAdd = true
      this.detailId = record.id
    },
    closeExplain() {
      this.showExplain = false
    },
    toExplain() {
      this.showExplain = true
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async change(record) {
      const params = {
        id: record.id
      }
      try {
        const FNCName = record.isUse == '启用' ? disablePeopleSet : enablePeopleSet
        const res = await FNCName('peoples', params)
        if (res.code == 200) {
          this.$message.success('更改状态成功')
          this.loadData()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning(error.msg)
      }
    },
    async loadData(key) {
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if (key) {
        params.current = 1
      }
      try {
        const res = await peopleSetList('peoples', params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.warning(res.msg || res.message)
        }
        this.loading = false
      } catch (error) {
        this.$message.warning(error.msg)
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.mr-10 {
  margin-left: 10px;
}
.start::before {
  content: ' ';
  border: 3px solid green;
  border-radius: 3px;
  position: absolute;
  margin-left: -9px;
  margin-top: 7px;
}
.end::before {
  content: ' ';
  border: 3px solid red;
  border-radius: 3px;
  position: absolute;
  margin-left: -9px;
  margin-top: 7px;
}
.icon {
  font-size: 25px;
  cursor: pointer;
  position: relative;
  left: 20px;
  top: 5px;
}
</style>